<!--
  @Description:自定义页面楼层配置
  @Author:zqy
  @Date:2022-12-15 16:01:35
  @Last Modified by:zqy
  @Last Modified time:2022-12-15 16:01:35
-->
<template>
  <div class="qup-full-page" style="padding:0">
    <edit
      v-if="showEdit"
      :page-show.sync="showEdit"
      :page-data="pageData"
      :detail="editData"
      @success="handleSubmitSuccess"
    />

    <inside-page v-show="!showEdit" :titles="['自定义页面管理', `楼层配置【${pageData.name}】(${pageData.type==='product'?'商品':'组合'})`]" @go-back="goBack">
      <div class="floor-page">
        <el-form size="mini" inline label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="页面名称:">
                {{ pageData.name }} ({{ pageData.type==='product'?'商品':'组合' }})
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="页面图标:">
                <img v-if="pageData.iconPicUrl" :src="pageData.iconPicUrl | filterImageUrl" class="cate_img">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="!editAble">
            <el-col :span="12">
              <el-form-item label="修改时间:">
                {{ pageData.lastUpdateTime | fiterTime }}
              </el-form-item>
              <el-form-item label="修改人员:">
                {{ pageData.lastUpdateBy }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间:">
                {{ pageData.createTime | fiterTime }}
              </el-form-item>

              <el-form-item label="创建人员:">
                {{ pageData.createBy }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <FloorList
          ref="refFloor"
          :page-data="pageData"
          :editable="editAble"
          @edit="handleEdit"
        />
      </div>
    </inside-page>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import Edit from '@/components/FloorConfig/Edit'
import FloorList from '@/components/FloorConfig/index'
export default {
  name: 'DefinePageFloor',
  components: { FloorList, Edit },
  filters: {
    fiterTime: parseTime
  },
  props: {
    pageShow: {
      type: String,
      default: '' // floor 楼层  ，detail 详情
    },
    pageData: {
      type: [String, Object],
      default: ''
    },
    editAble: {
      type: Boolean,
      default: false
    } // 是否可编辑
  },
  data() {
    return {
      showEdit: false,
      editData: '' // 编辑楼层详情数据
    }
  },
  computed: {
    nowPageShow: {
      get() {
        return this.pageShow
      },
      set(val) {
        this.$emit('update:pageShow', val)
      }
    }
  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    goBack() {
      this.nowPageShow = false
    },
    // 楼层编辑
    handleEdit(row) {
      if (row && row.id) {
        this.editData = row
      } else {
        this.editData = ''
      }
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    handleSubmitSuccess() {
      this.$refs.refFloor && this.$refs.refFloor.initTableData()
    }
  }
}
</script>
<style lang='scss' scoped>
  .cate_img{
    width: 70px;
    height: 70px;
    // object-fit: cover;
    object-fit: contain;
  }

  .floor-page {
    margin-top: 20px;
  }
</style>
